import { ref } from 'vue';
import { ElButton } from 'element-plus';
import ZwUnityKitSelectItems from '../../src/ZwUnityKitSelectItems/Index.vue';
import ZwUnityKitSelectCustTags from '../../src/ZwUnityKitSelectCustTags/Index.vue';

window.domainApi = '//api-dev.scrm.keyid.cn';

export default {
    title: 'Scrm System/ZwUnityKitSelectCustTags Library/ZwUnityKitSelectCustTags',
    component: ZwUnityKitSelectCustTags,
    tags: ['autodocs'],
    argTypes: {
        title: {
            control: { type: 'text' },
            type: { name: 'string', required: false },
            description: '标题字段，默认为选择标签'
        },
        type: {
            control: { type: 'boolean' },
            type: { name: 'boolean', required: false },
            description: 'true：数据源为客户标签；false：数据源是客户群标签，默认为true'
        },
        labelChooseType: {
            control: { type: 'radio' },
            type: { name: 'number', required: false },
            options: [1, 2],
            description: '标签类型，用于数据返回，1 批量打标签，2 选择标签，默认为1'
        },
        labelType: {
            control: { type: 'select' },
            type: { name: 'number', required: false },
            options: [0, 1, 2, 3, 4],
            description: '用于数据返回，0 无标签 1 满足任意一个标签  2 同时满足所有标签  3 批量打标签  4 删除， 默认为3'
        },
        hasConditiion: {
            control: { type: 'boolean' },
            type: { name: 'boolean', required: false },
            description: '是否有搜索栏上面的功能 true 没有刷新创建功能  false 有刷新创建功能， 默认为true'
        },
        modelValue: {
            control: { type: 'boolean' },
            type: { name: 'boolean', required: false },
            description: '是否显示组件， 默认为false'
        },
        chooseDataArr: {
            control: { type: 'array' },
            type: { name: 'array', required: false },
            description: '回显的标签数据  {id:***,name:***}'
        }
    }
};

const Template = args => ({
    components: { ZwUnityKitSelectCustTags, ZwUnityKitSelectItems, ElButton },
    setup() {
        const ZwUnityKitSelectCustTagsRef = ref();
        const isShow = ref(false);
        const tagList = ref([]);
        const open = val => {
            isShow.value = true;
        };
        const handleSubmit = val => {
            tagList.value = val.data;
        };
        return { args, isShow, open, handleSubmit, tagList, ZwUnityKitSelectCustTagsRef };
    },
    template: `
        <ZwUnityKitSelectItems tagBtnName="客户标签" v-model="tagList" @open="open" />
        <ZwUnityKitSelectCustTags v-bind="args" v-model="isShow" :chooseDataArr="tagList" @submit="handleSubmit" />
        <ZwUnityKitSelectCustTags v-bind="args" v-model="args.modelValue" :chooseDataArr="args.chooseDataArr" @submit="handleSubmit" />
    `
});

/**
 *  默认演示
 */
export const Default = Template.bind({});

/**
 *  数据回显
 */
export const DefaultSelected = Template.bind({});
DefaultSelected.args = {
    chooseDataArr: [
        {
            id: 517,
            name: '测试同步至企业微信'
        },
        {
            id: 483,
            name: '标签3'
        },
        {
            id: 513,
            name: '千万千万'
        }
    ]
};
